<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app">

    <button
    @click="count++">{{count}}</button>
    <button
    @click="addCount">{{count}}</button>
   

    <!-- 函数传参 -->
    <button @click="say('heelo bsga')">say baga</button>

<!-- 事件对象 阻止冒泡，默认行为 -->
 <form @submit.prevent="getUserInfo" action="https://www.baidu.com">
      <input type="text" name="userName" placeholder="用户名">
      <input type="password" name="password" placeholder="密码">
      <input type="submit" value="提交">
    </form>

<!-- 冒泡 -->
<div class="parent">
    <div class="son" @click.stop="print('son')"></div>
</div>

<!-- 回车事件 -->
<input type="text" @keyup.enter="dataa">

<!-- 使用系统修饰符可以自定义组合按键 -->
    <!-- 用户点击alt加enter时 清空输入框的数据 -->
    <!-- v-model 属于表单输入值的绑定 -->
    <input type="text" @keyup.control.enter="clear" v-model="text">
    <div @click.control="doSomething">do Something</div> 

</div>
</body>
<script src="./lib/vue.global.js"></script>
<script>
    const {createApp }=Vue 
    createApp({
        data() {
            return {
                count:10,
                text:1
            }
        },
        methods:{
            addCount(){
                console.log(event);
            this.count++
            },
            say(msg){
                console.log(msg);
            },
            getInfo(event){
                console.log(event);
            },
            print(aaa){
                console.log(aaa)
            },
            dataa(event){
                console.log('1');
            },
            clear(){
                this.text=''
            },
            doSomething(){
                console.log('doSomething')
            }
        }
    }).mount('#app')
</script>
</html>